
<div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
                </div>
              </div>
            <div class="layui-inline" >
              <div class="layui-input-inline" style="width: 300px">
                <select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >
                </select>
              </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">查询</a>
            </div>
        </div>
    </form>
</div>
<!-- 报警数据表格开始 -->
<table class="layui-table" id="alarm_report_table" lay-filter="alarm_report_table"></table>
<script type="text/html" id="alarm_report_bar">
    <a class="layui-btn layui-btn-xs " lay-event="show_alarm_detail">图表展示</a>
</script>
<!-- 报警数据表格结束 -->
<!-- e_chart部分开始 -->
<div class="layui-coutainer" style="display:none" id="echarts_div">
 <div class="layui-row" >
  <!-- 雷达图开始 -->
  <div class="layui-col-lg6">
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">健康数据雷达图</div> -->
          <div class="layui-card-body" style="text-align: center;">
             <div  id="radar_chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div class="layui-col-lg6" >
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card" >
          <!-- <div class="layui-card-header">人员基本信息</div> -->
          <div class="layui-card-body" style="">
             <div class="layui-row" id="person_base_info">
              <div class="layui-col-md6">
                <div class="layui-card" style="width: 260px;">
                  
                  <div class="layui-card-body" id="p_name">
                    姓名：
                  </div>
                   <div class="layui-card-body" id="p_sex">
                    性别：
                  </div>
                  <div class="layui-card-body" id="p_age">
                    年龄：
                  </div>
                  <div class="layui-card-body" id="p_department">
                    部门：
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-card">
                  
                  <div class="layui-card-body">
                    <img src="/static/img/person_default.png" style="width: 120px;height: 160px" id="p_picture">
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="" id="p_attach">
                    附加信息：
                  </div>
                  <div class="" id="p_remark">
                    备注信息：
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 曲线图 -->
  <div class="layui-row ">
    <div class="layui-col-md12" >
      <div class="layui-card">
        <!-- <div class="layui-card-header">健康数据详情</div> -->
        <div class="layui-card-body">
          <table id="alarm_report_detail_table" ></table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- e_chart部分结束 -->
<!-- js代码开始 -->
<!-- 引用echart插件 -->
<script src="/static/echartsjs/echarts.min.js"></script>
<script type="text/javascript">

form.render()
// table.render()
// 图标的宽度和高度的适应屏幕处理
var radar_chart_width=get_width/3
var radar_chart_height=get_height/2.2
$('#radar_chart').attr('style','height:'+radar_chart_height+'px;width:auto')
$('#person_base_info').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
var report_data_detail_height=get_height-radar_chart_height-100
var report_data_detail_width=get_width/1.1
// $('#alarm_report_detail_table').attr('style','height:'+report_data_detail_height+'px;width:auto;')


// 设备数据表格渲染函数
var alarm_report_table=function(table_data){
  table.render({
    elem: '#alarm_report_table',
    data: table_data,
    toolbar: true,
    title:'报警数据',
    id:'alarm_report_table',
    cols: [
    [   {
        field: 'user_name', 
        title: '名称',
        sort:true,
        templet:function(row){
          var device_name=get_detail_from_id(device,row.device_id);
          var user_name=device_name.user_name
          if(device_name.user_detail!='0'){
            user_name=device_name.user_detail.name
          }
          return user_name
        }}
      , {
        field: 'efence',
        title: '围栏报警',
        templet:function(ala){
          console.log(ala)
          var efe_num=ala.circle.length+ala.rectangle.length+ala.polygon.length
          return '<p>'+efe_num.toString()+'次</p>'
        }
    }, 
    // {
    //     field: 'polyline',
    //     title: '路线偏移',
    //     templet:function(row){
    //       return '<p>'+row.polyline.length.toString()+'次</p>'
    //     }
    // }, 
    {
        field: 'heart_alarm',
        title: '心率报警',
        templet:function(row){
          var alarm_count=row.heart_high.length+row.heart_low.length
          return '<p>'+alarm_count.toString()+'次</p>'
        }
    },   {
        field: 'h_blood_alarm',
        title: '收缩血压报警',
        templet:function(row){
          var alarm_count=row.l_pres_low.length+row.l_pres_heig.length
          return '<p>'+alarm_count.toString()+'次</p>'
        }
    },{
        field: 'l_blood_alarm',
        title: '舒张血压报警',
        templet:function(row){
          var alarm_count=row.h_pres_low.length+row.h_pres_heig.length
          return '<p>'+alarm_count.toString()+'次</p>'
        }
    },{
        field: 'fall_down',
        title: '摔倒报警',
        templet:function(row){
          return '<p>'+row.fall_down.length.toString()+'次</p>'
        }
    },{
        field: 'stop_alarm',
        title: '停留超时',
        templet:function(row){
          return '<p>'+row.stop_alarm.length.toString()+'次</p>'
        }  
    },  
    {
        field: 'sos_alarm',
        title: 'SOS报警',
        templet:function(row){
          return '<p>'+row.sos_alarm.length.toString()+'次</p>'
        }
    },
        {title: '操作',templet: '#alarm_report_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

alarm_report_table([])

// 健康数据查询的ajax
var get_report_data_detail='0';
var alarm_reports_ajax=function(query_param,query_detail){

  query_param=JSON.stringify(query_param)
  console.log(query_param)
   $.ajax({
          type: 'POST',
          url:"/alarm_reports/?what="+'health_alarm_reports',
          dataType: 'json',
          async:true,
          data:{query_param},
          success: function( data) {
          console.log(data)
          alarm_report_table(data)
        },
        error:function (edata) {
              console.log(edata)
          }
      }); 

}

// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {
  var search_key = data.field;
  var s_time=search_key['s_time'];
  var e_time=search_key['e_time'];
  console.log(formSelects.value('select', 'val'))
  query_param={'hard_id':formSelects.value('select', 'val'),'s_time':s_time,'e_time':e_time,'query_detail':'no'}
  alarm_reports_ajax(query_param,'table')
  return false;
});
// 监听图表展示按钮
table.on('tool(alarm_report_table)',function(obj){
  console.log(obj)
  layer.open({
        type: 1
        ,title:'健康数据展示:'
        ,area:['100%','100%'] 
        ,offset:'60px'
        ,id: 'health_reports_chart' //防止重复弹出
        ,content:$('#echarts_div')
        ,zIndex:999
        ,success:function(layero){
          show_chart(obj.data)
          var dev_detail=get_detail_from_id(device,obj.data.device_id)
          var user_detail=dev_detail.user_detail
          var dev_user_name=dev_detail.user_name;
          var user_sex='',user_department='',user_character='',user_age='',user_picture='';
          if(user_detail!='0' | user_detail!=0){
            user_sex=user_detail.sex
            var person_detail=eval('('+user_detail.person_detail+')')
            console.log(person_detail)
            user_department=person_detail.department
            user_character=person_detail.character
            user_age=person_detail.person_age
            user_picture=person_detail.picture
            dev_user_name=user_detail.name
          }
          if(user_picture==='' | user_picture==null){
            user_picture='/static/img/person_default.png'
          }
          $('#p_name').text('姓名：'+dev_user_name)
          $('#p_sex').text('性别：'+user_sex)
          $('#p_age').text('年龄：'+user_age)
          $('#p_department').text('部门：'+user_department)
          $('#p_picture').attr('src',user_picture)
          $('#p_remark').text('备注：')
          $('#p_attach').text('附加信息：')
        }
        ,shade: 0 //不显示遮罩

        
      });
})
// 图标展示功能函数

var show_chart=function(ala){

  console.log(ala)
  var efe_num=ala.circle.length+ala.rectangle.length+ala.polygon.length
  // 基于准备好的dom，初始化echarts实例
  var radar_chart = echarts.init(document.getElementById('radar_chart'));

  // 指定图表的配置项和数据
  var option = {
    // title: {
    // text: '某站点用户访问来源',
    // subtext: '纯属虚构',
    // left: 'center'
    // },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['SOS报警','舒张压低报警','舒张高低报警','收缩压高报警','收缩压报低警','心率低报警','心率高报警','电子围栏报警','摔倒报警']
    },
    series: [
        {
            name: '报警占比',
            type: 'pie',
            radius: '65%',
            center: ['60%', '50%'],

            data: [
                {value: ala.sos_alarm.length, name: 'SOS报警',attch:'sos_alarm'},
                {value: ala.l_pres_low.length, name: '舒张压低报警',attch:'l_pres_low'},
                {value: ala.l_pres_heig.length, name: '舒张高低报警',attch:'l_pres_heig'},
                {value: ala.h_pres_heig.length, name: '收缩压高报警',attch:'h_pres_heig'},
                {value: ala.h_pres_low.length, name: '收缩压报低警',attch:'h_pres_low'},
                {value: ala.heart_low.length, name: '心率低报警',attch:'heart_low'},
                {value: ala.heart_high.length, name: '心率高报警',attch:'heart_high'},
                {value: efe_num, name: '电子围栏报警',attch:'efence'},
                {value: ala.fall_down.length, name: '摔倒报警',attch:'fall_down'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }
  radar_chart.setOption(option);
  radar_chart.on('click',function(param){
    console.log(param)
    var chose_alarm=param.data.attch
    var alarm_report_detail=ala[chose_alarm];
    if(chose_alarm=='efence'){
      alarm_report_detail=ala.circle.concat(ala.rectangle,ala.polygon)
    }
    console.log(alarm_report_detail)
    table.render({
        elem: '#alarm_report_detail_table',
        data: alarm_report_detail,
        id:'alarm_report_detail_table',
        skin:'nob',
        size:'sm',
        height: report_data_detail_height-70,
        cols: [[
          {type: "checkbox", fixed: "left"},
          {field: 'index_num', title: '序号',templet:function(d){
            return d.LAY_INDEX
          }},
          {field: 'name', title: '设备名称',width:140,templet:function(d){
            var dev_name=get_detail_from_id(device,d.device_id)
            if(dev_name.user_detail!='0'){
              dev_name=dev_name.user_detail.name
            }else{
              dev_name=dev_name.user_name
            }
            return dev_name
          }},
          {field: 'device_id', title: '设备ID'},
          {field: 'kind', title: '报警类型',templet:function(d){
            alarm_kind_dict={'sos_alarm':'SOS报警','l_pres_low':'低压低报警','l_pres_heig':'低压高报警','h_pres_low':'高压低报警','f_pres_heig':'高压低报警',
                             'heart_low':'心率低报警','heart_high':'心率高报警','circle':'围栏报警','polygon':'围栏报价','rectangle':'围栏报价',
                             'fall_down':'摔倒报警','low_power':'低电量报警'}
            return alarm_kind_dict[d.kind]
          }},
          {field: 'content', title: '报警参数',templet:function(d){
            if(d.kind=='circle' | d.kind=='polygon' | d.kind=='rectangle' ){
              var efe_con=eval(d.content)
              var inout=efe_con[1];
              var inout_dict={'in':'进入','out':'出'}
              return inout_dict[inout]+efe_con[0]
            }
            return d.content
            
          }},
          {field: 'location', title: '报警地点',templet:function(d){
            var loca=eval('('+d.location+')');
            var ret;
            if(loca.satelite){
              ret=loca.satelite
            }else if(loca.wifi){
              ret='wifi'
            }
            return ret
          }},
          {field: 's_time', title: '报警时间'},
        ]],
        page: true
      });
  })
}

// 解析wifi和lbs地址，后台只匹配在数据库里面的存储好的lbs和wifi地址，没有的，需要用户单独点击获取地址，后台进行解析处理
var get_wifi_lbs_addr=function(device_id,track_type){

  var dev_id={}
  dev_id['device_id']=device_id
  dev_id['track_type']=track_type
  $.ajax({
      type: 'POST',
      data:dev_id,
      url:"/dynamic/?what=get_wifi_lbs_addr",
      async:true,
      dataType: 'json',
      success: function(address_data) {
        // console.log(address_data)
        address_data=address_data[0]
        if(address_data['lng']==0){
          layer.msg('无法匹配该'+track_type+'地址')
        }else{
          for(var i=0;i<device.length;i++){
            if(device_id==device[i]['device_id']){
              device[i]['lng']=address_data['lng']
              device[i]['lat']=address_data['lat']
              remove(device_id)
              on_check(device[i])
            }
          }
        }
      },
  });
}

//添加选择设备列表
$(function(){ 
  $('#chose_device').empty()
  for (var i = device.length - 1; i >= 0; i--) {
    var user_name=device[i]['user_name'];
    if(device[i]['user_detail']!='0'){
      user_name=device[i].user_detail.name
    }
    var option='<option value="'+device[i]['device_id']+'">'+user_name+'</option>'
  $('#chose_device').append(option)
  }
  formSelects.render()
});  

// 时间选择框渲染
laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});

</script>